<template>
  <view class="cont_order">
    <u-navbar
      :placeholder="true"
      :safeAreaInsetTop="true"
      bgColor="#f5f6f5"
      titleStyle="color:#000"
    >
      <view class="u-nav-slot" slot="center">
        <view class="config_bar" v-if="isGoDetail" @click="goBack">
          <uni-icons type="back" size="30"></uni-icons>
        </view>
        <view class="config_bar" v-else @click="goBackOrder">
          <uni-icons type="back" size="30"></uni-icons>
        </view>
        {{ isGoDetail ? "" : "订单" }}
      </view>
    </u-navbar>

    <scroll-view
      style="
        height: 88vh;
        position: absolute;
        width: 100vw;
        margin-bottom: 200rpx;
      "
      v-if="!isGoDetail"
      scroll-y="true"
      lower-threshold="30"
      @scroll="scroll"
      :scroll-top="scrollTop"
      @scrolltolower="scrollLower"
      refresher-enabled="true"
      @refresherrefresh="refresherrefresh"
      :refresher-triggered="refresherTriggered"
    >
      <!-- <view class="cont_wraper"></view> -->
      <view class="conclu_tab_main">
        <view class="tab_main_record">
          <view style="display: flex; flex-direction: row">
            <view class="record_picker">
              <uni-datetime-picker
                :clear-icon="false"
                v-model="recordSingle"
                type="datetimerange"
                placeholder="请输入订单时间"
                :border="false"
                rangeSeparator="至"
                @change="searchRecordList"
              />
            </view>
            <view @click="showPopup">
              <image
                style="width: 28rpx; height: 25rpx"
                src="../../static/order-img/筛选@3x.png"
              ></image>
              <view class="icon_open_gd">更多 </view>
            </view>
          </view>

          <view
            v-if="!loadingStation"
            class="main_record_wraper"
            :class="{ height_100: allInfo.isShowAmt != 1 }"
          >
            <view class="record-hood flex_start">
              <view>
                <view class="record-hood-img record_width">
                  <view class="record-hood-imgtext">应收:</view>
                  <view style="color: #819ef8">
                    ￥{{ allInfo.receivableAmt || 0 }}
                  </view>
                </view>
              </view>

              <view class="record-hood-img record_width">
                <view class="record-hood-imgtext">笔数:</view>
                <view style="color: #819ef8">
                  {{ allInfo.countNum || 0 }}
                </view>
              </view>
            </view>
            <view
              class="record-hood-img record_width"
              v-if="allInfo.isShowAmt == 1"
              style="margin-top: 10rpx"
            >
              <view class="record-hood-imgtext">实收:</view>
              <view style="color: #819ef8"> ￥{{ allInfo.amt || 0 }} </view>
            </view>
            <!-- 	<button @click="searchRecord">查询</button> -->
            <!-- <button @click="searchRecord" :class="[(recordSingle && recordValue) ? '' : 'disabled']">订单记录查询</button> -->
          </view>

          <view class="befor_record">
            <!-- <view class="title_record_a">
							<view class="title">数据汇总</view>
							<view class="title_record_b">
								<view class="order_nav">
									<view class="name">应收总计：{{ allInfo.receivableAmt || 0 }}元</view>
									<view class="val">实收总计：{{ allInfo.ssAmt || 0 }}元</view>
								</view>
								<view class="title_line"></view>
								<view class="order_nav">
									<view class="name">优惠总计：{{ allInfo.allPreferential || 0 }}元</view>
									<view class="val">数量总计：{{ allInfo.orderLiters || 0 }}（L/kg）</view>
								</view>
							</view>
							<view class="title_record_b" style="margin-top: 40rpx;">
								<view class="order_nav">
									<view class="name">订单数：{{ allInfo.countNum || 0 }}（笔）</view>
								</view>
							</view>
						</view> -->
            <view
              class="record-img_list"
              v-for="item in recordList"
              @click="goDetailPage(item)"
              :key="item.orderId"
            >
              <view class="record-hood">
                <view class="record-hood-img">
                  <image
                    class="record-img"
                    src="/static/order-img/组 46@3x.png"
                  ></image>
                  <view class="record-text">{{ item.stationName }}</view>
                </view>
                <!-- 0、未支付，1、已支付，2、线下退款，3、线上退款4、支付失败 -->
                <view class="record-payno" v-show="item.status === '0'"
                  >未支付</view
                >
                <view class="record-pay" v-show="item.status === '1'"
                  >已支付</view
                >
                <view class="record-payno" v-show="item.status === '2'"
                  >线下退款</view
                >
                <view class="record-payno" v-show="item.status === '3'"
                  >线上退款</view
                >
                <view class="record-payno" v-show="item.status === '4'"
                  >支付失败</view
                >
              </view>
              <view class="record-bottom">
                <view class="record-hood">
                  <view>应收金额</view>
                  <view class="val_amt">
                    {{
                      item.receivableAmt > 0
                        ? "+" + item.receivableAmt
                        : item.receivableAmt
                    }}元
                  </view>
                </view>
                <view class="record-hood" v-if="allInfo.isShowAmt == 1">
                  <view>实收金额</view>
                  <view class="val_amt">
                    {{ item.amt > 0 ? "+" + item.amt : item.amt }}元
                  </view>
                </view>
                <view class="record-hood">
                  <view>订单时间</view>
                  <view>{{ item.payDate }}</view>
                </view>
              </view>
              <!-- <view class="record_card">订单号：{{ item.orderNo }}</view> 
							<uni-icons type="forward" class="record_icon" size="18" color="#999"></uni-icons>-->
              <!-- <view class="record_cont">
								<view class="name">油站名：{{ item.stationName }}</view>
								<view class="val" @click.stop="() => xiaopiao(item)">补打小票</view>
							</view> -->
            </view>
          </view>

        

          <uni-load-more
            class="load-more"
            v-if="loadingStation"
            status="loading"
          />
        </view>
      </view>
    </scroll-view>

    <view
      v-if="!loadingStation"
      class="amain_record_wraper"
      :class="{ height_100: allInfo.isShowAmt != 1 && !isGoDetail }"
      :style="{ height: isGoDetail ? '0': '120rpx', padding: isGoDetail ? '0': '30rpx'}"
    >
      <uni-popup ref="popup" background-color="#fff" :before-close="true">
        <view class="record_station">
          <uni-data-select
            v-model="recordValue"
            :localdata="range"
            placeholder="请选择加油站"
          />
        </view>
        <view class="record_station">
          <uni-datetime-picker
            :clear-icon="false"
            v-model="recordSingle"
            type="datetimerange"
            placeholder="请输入订单时间"
            rangeSeparator="至"
          />
        </view>
        <view class="record_station">
          <uni-easyinput
            class="input"
            v-model="orderValue"
            placeholder="请输入订单号"
          />
        </view>
        <view class="record_station">
          <uni-easyinput
            class="input"
            v-model="customName"
            placeholder="请输入客户姓名"
          />
        </view>
        <view class="record_station">
          <uni-easyinput
            class="input"
            v-model="customCall"
            placeholder="请输入客户手机号"
          />
        </view>
        <view @click="showPopup" class="icon_open">展开收起更多</view>
        <button class="recoed_btn" @click="searchRecordList">
          订单记录查询
        </button>
      </uni-popup>
    </view>

    <!-- 查看详情 -->
    <view v-if="isGoDetail" class="see-hood-body">
      <view class="see-hood">
        {{ detaiInfo.receivableAmt || 0.0
        }}<span class="see-hood-yuan">元</span>
      </view>
      <view class="see-hood-text">
        <view class="see-hood-stationName">
          {{ detaiInfo.stationName }}
        </view>
        <view class="see-hood-text">
          <view class="record-payno" v-show="detaiInfo.status === '0'"
            >未支付</view
          >
          <view class="record-pay" v-show="detaiInfo.status === '1'"
            >已支付</view
          >
          <view class="record-payno" v-show="detaiInfo.status === '2'"
            >线下退款</view
          >
          <view class="record-payno" v-show="detaiInfo.status === '3'"
            >线上退款</view
          >
          <view class="record-payno" v-show="detaiInfo.status === '4'"
            >支付失败</view
          >
        </view>
      </view>

      <view class="see-body">
        <view class="see-body-text">加油信息</view>
        <view class="see-body-hr"></view>
        <view>
          <view class="see-item">
            <view class="see-item-top"> 订单号 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.orderNo }}
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 油企名 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.enterpriseName || "" }}
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 油号 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.oilName }}
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 油枪 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.oilGun }}
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 油品价格 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.oilPirce || 0.0 }}元
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 数量 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.orderLiters }}(L/kg)
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 客户姓名 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.consumer || "-" }}
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 手机号 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.customerPhone || "-" }}
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 加油员 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.oilPersonnel || "" }}
            </view>
          </view>
        </view>
      </view>
      <view class="see-body">
        <view class="see-body-text">支付信息</view>
        <view class="see-body-hr"></view>
        <view>
          <view class="see-item">
            <view class="see-item-top"> 加油金额 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.receivableAmt || 0.0 }}元
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 实付金额 </view>
            <view class="see-item-bottom"> {{ detaiInfo.amt || 0.0 }}元 </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 优惠券金额 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.discountCouponAmt || 0.0 }}元
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 优惠金额 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.discountAmt || 0.0 }}元
            </view>
          </view>

          <view class="see-item">
            <view class="see-item-top"> 返利抵扣金额 </view>

            <view class="see-item-bottom">
              {{ detaiInfo.returnCashAmt || 0.0 }}元
            </view>
          </view>

          <view class="see-item">
            <view class="see-item-top"> 赠送返利金额 </view>

            <view class="see-item-bottom">
              {{ detaiInfo.giftReturnCash || 0.0 }}元
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 支付方式 </view>
            <view class="see-item-bottom">
              {{ payTypeFotmat(detaiInfo) }}
            </view>
          </view>
          <view class="see-item">
            <view class="see-item-top"> 支付时间 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.payDate }}
            </view>
          </view>

          <view class="see-item">
            <view class="see-item-top"> 创建时间 </view>
            <view class="see-item-bottom">
              {{ detaiInfo.createdDate }}
            </view>
          </view>
        </view>
      </view>
      <view class="see-foot" @click.stop="xiaopiao(detaiInfo)">补打小票</view>
    </view>
  </view>
</template>
<script>
import { getUserInfo } from "@/util/info.js";
import {
  getStationListJD,
  historyOrderList,
  selectPayOrderSum,
  historyOrderFeiePush,
  changeTimeOrder,
  employeePermission,
} from "@/common/yftx-api.js";
import { getDateArrNew } from "@/util/utils.js";
import store from "@/store";
export default {
  data() {
    return {
      refresherTriggered: false,
      scrollTop: 0,
      oldScrollTop: 0,
      // 总条数
      total: null,
      // 当前页数
      page: 1,
      // 总页数
      totalPage: null,
      loadingStation: false,
      stationId: "",
      detaiInfo: {},
      allInfo: {},
      recordList: [],
      range: [],
      isGoDetail: false,
      isMore: false,
      recordSingle: [],
      recordValue: "",
      orderValue: "",
      customName: "",
      customCall: "",
      InfouSerLevel: "",
      userInfo: {},
      staff: false,
    };
  },
  async onShow() {
    await this.getUserInfouSerLevel();
    await this.getStaff();
    if (this.InfouSerLevel == 2 && !this.staff) {
      await this.changeTime();
    } else {
      this.recordSingle = getDateArrNew();
    }
    this.recordList = [];
    this.getData();
    this.searchRecordList();
    //视图会发生重新渲染
    this.scrollTop = this.oldScrollTop;
    //当视图渲染结束 重新设置为0
    this.$nextTick(() => {
      this.scrollTop = 0;
    });
    uni.showToast({
      icon: "none",
      title: "纵向滚动 scrollTop 值已被修改为 0",
    });
  },
  methods: {
    async getStaff() {
      const res = await employeePermission();
      this.staff = res.data.staff;
    },
    async changeTime() {
      let params = {
        stationId: this.userInfo.stationId,
        userId: this.userInfo.userId,
      };
      const res = await changeTimeOrder(params);
      this.recordSingle = [res.data.startTime, res.data.endTime];
    },
    // 获取用户等级
    async getUserInfouSerLevel() {
      const level = await getUserInfo("userLevel");
      this.InfouSerLevel = level;
      // 这个用户等级仅仅用来控制油价调增的
      const userInfo = await getUserInfo("userInfo");
      this.userInfo = JSON.parse(userInfo);
    },
    // 下拉刷新被触发了
    refresherrefresh() {
      this.refresherTriggered = true;
      this.recordList = [];
      this.searchRecordList();
      console.log("下拉刷新被触发了");
    },

    scroll(e) {
      //记录scroll  位置
      this.oldScrollTop = e.detail.scrollTop;
    },

    scrollLower() {
      if (this.page > this.totalPage) {
      } else {
        this.page = this.page + 1;
        this.searchRecord();
      }
    },
    async getData() {
      const range = await getStationListJD();
      console.log("dsvsvsv", range);
      this.range = range.data.map((item) => {
        return {
          value: item.stationId,
          text: item.stationName,
        };
      });

      // getStationList().then(res => {
      // 	if (res && res.code === 200) {
      // 		const range = res.rows.map(item => {
      // 			return {
      // 				value: item.stationId,
      // 				text: item.stationName,
      // 			}
      // 		})
      // 		console.log("ssss",range)
      // 		this.range = range;
      // 	}
      // })
    },
    // 返回
    goBackOrder() {
      uni.switchTab({
        url: "/pages/index/my",
      });
    },
    goBack() {
      this.isGoDetail = false;
    },
    xiaopiao(val) {
      const params = {
        orderId: val.orderId,
      };
      historyOrderFeiePush(params).then((res) => {
        if (res && res.code === 200) {
          uni.showToast({
            title: "补打成功",
            duration: 1000,
          });
        }
      });
    },
    showPopup() {
      this.isMore = !this.isMore;
      if (this.isMore) {
        this.$refs.popup.open("bottom");
      } else {
        this.$refs.popup.close();
      }
    },
    payTypeFotmat(val) {
      let types = {
        wx: "微信支付",
        zfb: "支付宝",
        xj: "现金支付",
        dzk: "电子卡支付",
        pos: "POS机支付",
        yzf: "预支付",
        kbzf: "卡包支付",
        yhk: "银行卡支付",
        cdk: "车队卡支付",
        dkq: "实体卡支付",
        yhk: "银行卡支付",
      };
      console.log("支付方式", types[val.payType], val.payTypeName);
      if (types[val.payType]) {
        return types[val.payType];
      } else {
        return val.payTypeName;
      }
    },
    statusFotmat(val) {
      if (val === "0") {
        return "未支付";
      } else if (val === "1") {
        return "已支付";
      } else if (val === "2") {
        return "线下退款";
      } else if (val === "3") {
        return "线上退款";
      }
    },
    searchRecordList() {
      // if (!this.recordSingle || !this.recordValue) {
      // 		return;
      // }
      // const a = this.range.find(item => item.value === this.recordValue)
      // this.recordSingle = getDateArrNew();
      this.page = 1;
      this.recordList = [];
      this.searchRecord();
    },
    searchRecord() {
      this.loadingStation = true;
      let params = {
        pageNum: this.page,
        pageSize: 10,
        beginTime: this.recordSingle[0],
        endTime: this.recordSingle[1],
        stationId: this.recordValue,
        orderNo: this.orderValue,
        likeConsumer: this.customName,
        likeCustomerPhone: this.customCall,
      };
      let userLevel = store.state.userLevel;
      if (["1", "2", "5", "6"].includes(userLevel)) {
        params.isDeleted = 0;
      }
      historyOrderList(params).then((res) => {
        this.refresherTriggered = false;
        if (res && res.code === 200) {
          this.totalPage = res.total / 10;
          this.total = res.total;
          this.recordList.push(...res.rows);
        } else if (res) {
          uni.showToast({
            title: `${res.msg}`,
            icon: "error",
            duration: 2000,
          });
        }
      });
      selectPayOrderSum(params).then((res) => {
        if (res && res.code === 200) {
          this.allInfo = res.data;
        } else if (res) {
          this.allInfo = res.data;
          uni.showToast({
            title: `${res.msg}`,
            icon: "error",
            duration: 2000,
          });
        }
      });
      setTimeout(() => {
        this.loadingStation = false;
      }, 500);
    },
    goDetailPage(val) {
      console.log("item1111", val, this.recordList);

      this.loadingStation = true;
      this.detaiInfo = val;
      setTimeout(() => {
        this.loadingStation = false;
        this.isGoDetail = true;
      }, 200);
    },
  },
};
</script>
<style lang="scss">
.see-hood-body {
  padding-left: 6%;
}
.record_width {
  height: 40rpx;
}
.flex_start {
  display: flex;
  align-items: flex-start !important;
}
page {
  width: 94%;
  background-color: #f5f6f5;
  padding-top: 3%;
  padding-right: 3%;
  padding-bottom: 60px;
}

.see-hood {
  font-size: 25px;
  color: #333;
  padding: 0px 5px;
  margin-bottom: 3px;
}

.see-hood-yuan {
  margin: 0px 3px;
  font-size: 13px;
  color: #9095ad;
}

.see-hood-text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0px 5px;
}

.record-payno {
  font-size: 12px;
  width: 62px;
  height: 22px;
  line-height: 22px;
  color: #ff4445;
  text-align: center;
  border-radius: 10px;
  background-color: #ffecec;
}

.record-pay {
  font-size: 12px;
  width: 62px;
  height: 22px;
  line-height: 22px;
  color: #0dbe00;
  text-align: center;
  border-radius: 10px;
  background-color: #e6f8e5;
  margin-left: 20px;
}

.see-hood-stationName {
  font-size: 14px;
  color: #9095ad;
}

.see-body {
  background-color: #fff;
  border-radius: 10px;
  margin: 10px 0px;
  padding: 15px 5px 5px 5px;
}

.see-body-text {
  font-size: 16px;
  border-left: 2px solid #ff4445;
  height: 15px;
  width: 100px;
  line-height: 15px;
  text-align: center;
  margin: 0px 15px;
}

.see-body-hr {
  width: 100%;
  height: 2px;
  background-color: #f5f6f5;
  margin: 15px 0px;
}

.see-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px 10px 15px 10px;
}

.see-item-top {
  font-size: 14px;
  color: #9095ad;
}

.see-item-bottom {
  font-size: 14px;
  color: #333;
}

.see-foot {
  border-radius: 25px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  margin: 0px 10% 10px 10%;
  width: 80%;
  height: 50px;
  background-color: #496ef6;
  position: fixed;
  bottom: 0px;
  left: 0px;
}

.record-payno {
  font-size: 12px;
  width: 62px;
  height: 22px;
  line-height: 22px;
  color: #ff4445;
  text-align: center;
  border-radius: 10px;
  background-color: #ffecec;
}

.record-pay {
  font-size: 12px;
  width: 62px;
  height: 22px;
  line-height: 22px;
  color: #0dbe00;
  text-align: center;
  border-radius: 10px;
  background-color: #e6f8e5;
}

.record-hood-imgtext {
  font-weight: bold;
  color: #333;
}

.record-hood-img {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.record-hood {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.record-bottom {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 72px;
  background-color: #f7f9fc;
  margin-top: 10px;
  padding: 5px 10px 5px 10px;
  border-radius: 12px;
}

.record-img_list {
  height: 12%;
  background-color: #fff;
  border-radius: 12px;
  margin: 0px 10px 10px 10px;
  padding: 10px;
}

.record-img {
  width: 35px;
  height: 35px;
}

.record-text {
  font-weight: bold;
  margin: 0px 10px;
  color: #333;
}

.icon_open_gd {
  font-size: 11px;
  text-align: center;
}

.record_picker {
  width: 80%;
  height: 38px;
  background-color: #fff;
  padding: 2px 10px 1px 10px;
  border-radius: 19px;
  margin: 0px 10px 10px 10px;

  .uni-date__x-input {
    font-size: 11px;
  }
}

.cont_order {
  .u-navbar {
    .u-icon {
      display: none;
    }
  }

  .amain_record_wraper {
    padding: 30rpx;
    width: 94%;
    margin: 0px 3%;
    height: 120rpx;
    line-height: 46px;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    border-radius: 25rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .icon_open {
      text-align: center;
      font-size: 26rpx;
      color: #fc650e;
      margin: 0 auto 20rpx;
    }
    .recoed_btn {
      background-color: #fc650e;
      color: #fff;
    }
    .record_station {
      align-items: center;
      display: flex;
      width: 100%;
      margin-bottom: 30rpx;
      margin-top: 40rpx;

      .uni-date__x-input {
        font-size: 24rpx;
      }

      .name {
        font-size: 26rpx;
        margin-right: 20rpx;
      }

      .input {
        flex: 1;
      }

      .uni-select {
        width: 670rpx;
      }
    }
  }

  .main_record_wraper {
    background-color: #fff;
    padding: 30rpx;
    width: 94%;
    margin: 0px 3%;
    height: 120rpx;
    line-height: 46px;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    border-radius: 25rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .icon_open {
      text-align: center;
      font-size: 26rpx;
      color: #fc650e;
      margin: 0 auto 20rpx;
    }
    .recoed_btn {
      background-color: #fc650e;
      color: #fff;
    }
    .record_station {
      align-items: center;
      display: flex;
      width: 100%;
      margin-bottom: 30rpx;
      margin-top: 40rpx;

      .uni-date__x-input {
        font-size: 24rpx;
      }

      .name {
        font-size: 26rpx;
        margin-right: 20rpx;
      }

      .input {
        flex: 1;
      }

      .uni-select {
        width: 670rpx;
      }
    }
  }

  .u-nav-slot {
    color: #000;
  }

  .config_bar {
    position: absolute;
    color: #000;
    font-size: 32rpx;
    left: 20rpx;
    top: 24rpx;
  }

  .cont_wraper {
    width: 100%;
    position: absolute;
    z-index: -1;
    height: 60rpx;
    background-color: #0020f5;
  }

  .conclu_tab_main {
    padding-top: 20rpx;
    box-sizing: border-box;
    background-color: #f5f5f5;
    height: 100%;

    .uni-load-more {
      margin-top: 300rpx;
    }

    button {
      background-color: #fc6703;
      color: #fff;
      border-radius: 10rpx;
      border: none;
      //&.disabled {
      //background-color: #eee;
      //color: #666;
      //}
    }

    .tab_main_record {
      background-color: #f5f6f5;
      min-height: 90vh;
      .height_100 {
        height: 100rpx !important;
      }

      .befor_record {
        .title_record_a {
          padding: 30rpx;
          background-color: #fff;
          border-radius: 30rpx;
          box-sizing: border-box;
          margin-bottom: 20rpx;

          .title {
            margin-bottom: 30rpx;
            font-size: 26rpx;
          }

          .title_record_b {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          .title_line {
            width: 1px;
            height: 80rpx;
            background-color: #999;
          }

          .order_nav {
            display: flex;
            flex-direction: column;
            position: relative;
            color: #000;
            font-size: 26rpx;

            .name {
              margin-bottom: 40rpx;
            }

            .val {
            }
          }
        }
      }
    }
  }

  .uni-popup {
    position: absolute;

    .uni-popup__wrapper {
      padding: 40rpx;
    }
  }

  .nav_bar_conclu .uni-navbar {
    .uni-navbar--border {
      border-bottom-style: none;
    }
  }

  .val_amt {
    color: #ff4445;
  }

  .record_icon {
    position: absolute;
    right: 14rpx;
    top: 80rpx;
  }

  .record_detail_container {
    font-size: 26rpx;
    color: #000;
    width: 100%;
    box-sizing: border-box;
    padding: 60rpx;

    .card {
      display: flex;
      justify-content: space-between;
      position: relative;
      margin-bottom: 20rpx;

      &.line {
        margin-bottom: 40rpx;

        &::after {
          content: "";
          position: absolute;
          width: 300rpx;
          height: 1px;
          background-color: #333;
          left: -16rpx;
          top: 50rpx;
        }
      }
    }
  }
}
</style>
